<template>
	<div class="zh-watermark-record">
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-right fr">
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt">
				<el-table
				    :data="listData"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="index"
	                  :index="typeIndex"
				      label="序号"
				      align="center"
				      show-overflow-tooltip
				      width="50"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="batch_txt"
				      label="水印批次"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_time"
				      label="水印设置日期"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="username"
				      label="操作用户"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="usernumber"
				      label="操作账号"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="水印状态"
				      align="center"
				      show-overflow-tooltip
				      >
						<template slot-scope="scope" >
								<span v-html="getStatustTxt(parseInt(scope.row.status),parseInt(scope.row.open))" ></span>
						</template>
				    </el-table-column>
				    <el-table-column
				      prop="5"
				      label="操作"
				      align="center"
				      show-overflow-tooltip
				      width="160"
				      >
				      	<template slot-scope="scope">
				      		<el-button @click="viewWaterMark(scope.row)" type="text">预览</el-button>
				      		<el-button v-if="parseInt(scope.row.status) === 1 && parseInt(scope.row.open) !== 1" @click="openMark(scope.row)" type="text">开启水印</el-button>
				      		<el-button v-if="parseInt(scope.row.status) !== 1" @click="restartMark(scope.row)" type="text">重启水印</el-button>
				      		<el-button @click="deleteMark(scope.row)" type="text">删除</el-button>
				      	</template>
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-if="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="listParam.page_index"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="listParam.page_size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
		
        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
                imagePreview: {
                    showViewer: false,
                    previewSrcList: []
                },
		    	imgVisible: false,
		    	imgViewUrl:'',
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		        listData:[],
		    	listParam:{
		       		page_index:1,
		       		page_size:10,
		        },
		        total_number:0,
		    }
		},
		created(){
			this.getList();
	    },
	    computed: {
            imageIndex() {
                return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
            }
        },
		methods: {
			viewWaterMark(obj){
				this.imgViewUrl = this.BASE_URL + obj.picture
                this.imagePreview.showViewer = true;
                this.imagePreview.previewSrcList = [this.BASE_URL + obj.picture];
            },
            closeViewer() {
                this.imagePreview.showViewer = false;
            },
			deleteMark( obj ){
				let yes = ( data => {
					let success = ( data=>{
	            		this.$message.success(data.msg);
	            		
						if (this.listData.length - 1 === 0) {
							if (this.listParam.page_index > 1) {
								this.listParam.page_index-- ;
							} else {
								this.listParam.page_index = 1;
							}
						}

	            		this.getList();
	            	})
					this.$ajax.delete('api/setting/delete_watermark',{params:{id:obj.waterid},func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定删除第 '+obj.batch_txt+' 批水印吗？'});
			},
			openMark( obj ){
				let yes = ( data => {
					let success = ( data=>{
	            		this.$message.success(data.msg);
	            		this.getList();
	            	})
					this.$ajax.post('api/setting/open_watermark',{id:obj.waterid},{func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定开启第 '+obj.batch_txt+' 批水印吗？'});
			},
			restartMark( obj ){
				let yes = ( data => {
					let success = ( data=>{
	            		this.$message.success(data.msg);
	            		this.getList();
	            	})
					this.$ajax.put('api/setting/restart_watermark',{id:obj.waterid},{func:{success:success}})
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定重启第 '+obj.batch_txt+' 批水印吗？'});
			},
			getStatustTxt(status,open){
				if( status === 1 && open === 1 ){
					return '启用中';
				}else if(status === 1 && open !== 1){
					return '关闭中';
				}else{
					return '已关闭';
				}
			},
			getList(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.listData = data.data.data;
            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false;
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/setting/watermark_list',{params: this.listParam,func:{success:success,fail:fail}})
            },
			// 序号
            typeIndex(index) {
                return index + (this.listParam.page_index - 1) * this.listParam.page_index + 1;
            },
		    handleSizeChange(val) {
		    	this.listParam.page_index = 1;
		    	this.listParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.listParam.page_index = val;
		    	this.getList();
		    },
		},
  	}
</script>
<style lang="scss">
.zh-watermark-record {
	.el-dialog__wrapper{
		text-align: center;
	}
	.imgVisible{
		display: inline-block;
		vertical-align: middle;
		background: none;
		text-align: left;
		min-width: 550px;
		min-height: 400px;
		background: rgba(109, 116, 125, 0.78);
		margin: 0;
		.el-dialog__header{
			// display: none;
		}
		.el-dialog__body{
			text-align: center;
			padding: 0;
			img{
				max-width: 100%;
			}
		}
	}

    .el-table__body-wrapper table tbody {
        td:nth-child(7) {
            padding: 0;
        }
    }

}
</style>